<template>
    <el-time-picker
        v-model="timeValue"
        :disabled="disabled"
        :is-range="config.isRange"
        :readonly="config.readonly"
        :clearable="config.clearable"
        :format="config.format"
        :value-format="config.valueFormat"
        :arrow-control="config.arrowControl"
        :placeholder="config.placeholder"
        :start-placeholder="config.startPlaceholder"
        :end-placeholder="config.endPlaceholder"
        :range-separator="config.rangeSeparator"
        @change="change"
        style="width: 100%"
        size="small"
    />
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch, Emit } from 'vue-property-decorator';
import { Partial, Dictionary, TimePickerConfig } from '@/typings';

const DEFAULT_CONFIG: TimePickerConfig = {
    placeholder: '选择时间',
    arrowControl: false,
    readonly: false,
    clearable: true,
    isRange: false,
    rangeSeparator: '-',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    format: 'HH:mm',
    valueFormat: 'HH:mm'
};

@Component({
    name: 'base-timePicker'
})
/**
 * @param value = 绑定值
 * @param disabled = 是否禁用
 * @param timePickerProps = 基础属性
 * @method change = 绑定值被改变
 * */
export default class BaseTimePicker extends Vue {
    @Prop() timePickerProps: Partial<TimePickerConfig>;
    @Prop({ required: true }) value: any;
    @Prop({ default: false }) disabled: boolean;

    @Watch('timePickerProps', { immediate: true, deep: true })
    onTimePickerPropsChanged(val: Dictionary<any>) {
        this.config = Object.assign({}, DEFAULT_CONFIG, val);
    }

    @Watch('value')
    onValueChanged(data) {
        this.timeValue = data;
    }

    @Emit('change')
    change(currentValue) {
        return currentValue;
    }
    timeValue: any = '';
    config: TimePickerConfig = DEFAULT_CONFIG;
}
</script>
